<template>
    <div class="layout" style="padding:10px">
        <Layout>
            
                <Breadcrumb>
                <BreadcrumbItem to="/">首页</BreadcrumbItem>
                <BreadcrumbItem to="/components/breadcrumb">用户管理</BreadcrumbItem>
                <BreadcrumbItem>新增</BreadcrumbItem>
            </Breadcrumb>
            
            <Content style="padding:20px">
                <Form ref="formInline" :model="sysAccount"  >
                    <FormItem prop="user" label="请输入用户账号">
                        <Input type="text" v-model="sysAccount.loginAccount" placeholder="">
                        </Input>
                    </FormItem>
                    <FormItem prop="user" label="请输入用户姓名">
                        <Input type="text" v-model="sysAccount.userName" placeholder="">
                        </Input>
                    </FormItem>
                    <FormItem prop="user" label="请选择用户角色">
                        
                    </FormItem>
                    <CheckboxGroup v-model="userRoleId">
                        <Checkbox v-for="role in sysRoleList" :key="role.roleId" :label="role.roleId">{{role.roleName}}</Checkbox>
                    </CheckboxGroup>
                    <FormItem prop="user" label="请选择机构">
                        <!-- <div style="border:0px solid orange" @click.captrue.stop="selectDept">
                            <Input type="text" v-model="sysAccount.sysDepartment.deptName"  placeholder="请选择机构">
                            </Input>
                        </div>
                        <div class="treeDiv" v-show="showDeptSel">
                            <Tree ref="tree" :data="deptList" @on-select-change="treeClick" :load-data="loadData"></Tree>
                        </div> -->
                        <Dropdown trigger="custom" :visible="showDeptSel" style="width:100%">
                            <div class="menu-div" @click="openDeptSel" v-text="sysAccount.sysDepartment.deptName"></div>
                            <DropdownMenu slot="list">
                                <DropdownItem>
                                    <Tree ref="tree" :data="deptList" 
                                    :load-data="loadData" 
                                    @on-select-change="treeClick"
                                    ></Tree>
                                </DropdownItem>
                            </DropdownMenu>
                        </Dropdown>
                    </FormItem>
                    <FormItem prop="user" label="请输入联系电话">
                        <Input type="text" v-model="sysAccount.userTele" placeholder="请输入联系电话">
                        </Input>
                    </FormItem>
                    <FormItem>
                        <Button type="primary" icon="save" size='small' @click="save">保存</Button>
                        <Button type="primary" icon="arrow-back" size='small'  @click="back">返回</Button>
                    </FormItem>
                
                </Form>
            </Content>
        </Layout>
      
      
    </div>
</template>
<script>
export default {
  data(){
      return{
          showDeptSel:false,
          sysAccount:{
              userName:'',
              loginAccount:'',
              userAcctId:this.$route.params.userAcctId,
              sysDepartment:{}
          },
          sysRoleList:[],
          userRoleId:[],
          deptList:[],
          deptId:'',
          id:'',
      }
  },
  created(){
      //alert(this.$route.params.userAcctId)
      this.getUserInfo()
      this.getDeptData(null,this.$store.getters.getUser.deptCode)
  },
  watch:{
      showDeptSel:function(oldVal,newVal){
        console.log('oldVal',oldVal)
        console.log('newVal',newVal)
      }
  },
  methods:{
    openDeptSel(){
        this.showDeptSel = true;
        console.log('showDeptSel',this.showDeptSel)
    },
    loadData(item, callback){
        console.log('item',item)
        this.id = item.deptCode
        this.getDeptData(callback)
    },
    back(){
        this.$router.push({name:'userList'});
    },
    save(){
        var formData = {
        sysAccount:this.sysAccount,
        deptId:this.deptId,
        userAcctId:this.sysAccount.userAcctId,
        };
        var params = new URLSearchParams();
        params.append('sysAccount',this.sysAccount)
        /*var formData = new FormData();
        formData.append('sysAccount',this.sysAccount)
        */
        //sysAccount:this.sysAccount,userRole:this.userRoleId.join(',')
        this.$post('sys/accountSave?userRoles='+this.userRoleId.join(','),this.sysAccount,'',false)
        .then(res=>{
            console.log(res)
            if(res.success){
                this.$Message.info('保存成功')
                setTimeout(()=>{
                    this.$router.push({name:'userList'});
                },1500)
                
            }
        })
    },
    treeClick(data){
        // this.deptId = data[0].id
        // this.sysAccount.sysDepartment.deptId = data[0].id
        // this.sysAccount.sysDepartment.deptName = data[0].name
        // this.showDeptSel = false
        //console.log(data)
    },
    selectDept(){
        //this.$Message.info('tree')
        this.showDeptSel = !this.showDeptSel;
        //console.log('showDeptSel',this.showDeptSel)
    },
    getDeptData(callback,deptCode){
    this.$fetch('sys/departmenttree',{
        id:this.id,
        deptCode
    })
    .then(result=>{
        console.log('dept res',result)
        if(result.success){
            result.treeList.forEach(item=>{
                item.render = (h, { root, node, data }) => {
                    return h('span', {
                        style: {
                            display: 'inline-block',
                            width: '100%'
                        }
                    }, [
                        h('span', [
                            h('Icon', {
                                props: {
                                    type: 'ios-folder-outline'
                                },
                                style: {
                                    marginRight: '8px'
                                }
                            }),
                            h('span', {
                                on: {
                                    click: () => { 
                                        this.sysAccount.sysDepartment.deptId = data.id
                                        this.sysAccount.sysDepartment.deptName = data.name
                                        this.showDeptSel = false
                                    }

                                }
                            },data.title)
                        ]),
                        h('span', {
                            style: {
                                display: 'inline-block',
                                float: 'right',
                                marginRight: '32px'
                            }
                        },)
                    ]);
                }
            })
            //this.deptList = result.treeList
        }
        if(callback){
            callback(result.treeList)
        } else {
            this.deptList = result.treeList
        }
    })
    
    },
    getUserInfo(){
    this.$fetch('sys/accountEdit',{
        userAcctId:this.sysAccount.userAcctId
    })
    .then(result=>{
        //console.log('res',result)
        if(result.success){
            this.sysRoleList = result.sysRoleList
            this.userRoleId = result.userRoleId
            this.sysAccount = result.sysAccount
            //this.userRolemap = res.userRolemap
        }
        
    })
    },
    renderTree (h, { root, node, data }) {
        return h('span', {
            style: {
                display: 'inline-block',
                width: '100%'
            }
        }, [
            h('span', [
                h('Icon', {
                    props: {
                        type: 'ios-add'
                    },
                    style: {
                        marginRight: '8px'
                    }
                }),
                h('span', data.title)
            ]),
            h('span', {
                style: {
                    display: 'inline-block',
                    float: 'right',
                    marginRight: '32px'
                }
            }, [
                h('Button', {
                    props: Object.assign({}, this.buttonProps, {
                        icon: 'ios-add'
                    }),
                    style: {
                        marginRight: '8px'
                    },
                    on: {
                        click: () => { this.append(data) }
                    }
                }),
                h('Button', {
                    props: Object.assign({}, this.buttonProps, {
                        icon: 'ios-remove'
                    }),
                    on: {
                        click: () => { this.remove(root, node, data) }
                    }
                })
            ])
        ]);
      }
  }

}
</script>
<style scoped>
.treeDiv{
    position: relative;
    top:-8px;
    border:1px solid #ccc;
    border-top:none;
    background-color: #fff;
}
</style>


